<template>
  <div :style="style" class="small-rect"></div>
</template>

<script>
export default {
  name: "SmallRect",
  props: {
    width: {
      type: String,
      default: '10px'
    },
    height: {
      type: String,
      default: '6px'
    },
    color: {
      type: String,
      default: '#000'
    },
    radius: {
      type: String,
      default: '1.5px'
    },
    // 旋转角度
    deg: {
      type: [Number, String],
      default: '0'
    },
    position: {
      type: String,
      default: 'relative'
    }
  },
  computed: {
    style () {
      return {
        width: this.width,
        height: this.height,
        backgroundColor: this.color,
        borderRadius: this.radius,
        transform: `rotate(${this.deg}deg)`
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.small-rect{
  display: inline-block;
}
</style>
